<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <AreaSelector>
        
    <el-form  :inline="true" class="demo-form-inline">
    <el-form-item label="省份">
    <el-select placeholder="请选择省份" @change="doCityList()" v-model="queryParam.provinceId" clearable >
       <el-option v-for="(p,index) in pList"  :key="index"  :label="p.name" :value="p.id" />
    </el-select>
    </el-form-item>
    <el-form-item label="城市">
        <el-select placeholder="请选择城市" @change="doDistrictList()" v-model="queryParam.cityId" clearable>
             <el-option v-for="(c,index) in cList" :key="index" :label="c.name" :value="c.id" />
        </el-select>
    </el-form-item>
    <el-form-item label="区域">
        <el-select placeholder="请选择区域" v-model="queryParam.districtId" clearable >
          <el-option v-for="(d,index) in dList" :key="index" :label="d.name" :value="d.id" />
        </el-select>
    </el-form-item>
    <el-form-item>
    <el-button type="primary" plain @click="doAparmentListQuery()" :icon="Search">搜索</el-button>
    <el-button type="waring" plain @click="resetData()" :icon="Delete">重置</el-button>
    </el-form-item>
    </el-form>
      
      </AreaSelector>

      <el-button type="primary" @click="jumpAdd()" :icon="Plus">新增公寓</el-button>

      <el-table :data="apartmentList" border stripe style="margin: 20px 0;">
        <el-table-column label="名称" align="center" prop="name"></el-table-column>
        <el-table-column label="详细地址"  show-overflow-tooltip align="center" prop="addressDetail" ></el-table-column>
        <el-table-column label="空闲房间数" align="center" prop="freeRoomCount"></el-table-column>
        <el-table-column label="房间总数" align="center"  prop="totalRoomCount"></el-table-column>
        <el-table-column label="所属省份" align="center" prop="provinceName" ></el-table-column>
        <el-table-column label="所属城市" align="center"  prop="cityName"></el-table-column>
        <el-table-column label="所属区域" align="center" prop="districtName" ></el-table-column>
        <el-table-column label="联系方式" align="center" prop="phone"></el-table-column>
        <el-table-column label="入住状态" align="center" width="84px">
          <template v-slot="{ row, $index }">
            <el-tag type="success" v-if="row.freeRoomCount>0">可入住</el-tag>
            <el-tag type="danger" v-else>已满房</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="发布状态" align="center" width="84px">
          <template v-slot="{ row, $index }">
            <el-switch
              v-model="row.isRelease"
              class="ml-2"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template v-slot="{ row, $index }">
            <el-button type="warning" :icon="Edit" @click="jumpEdit(row.id)">修改</el-button>
            <el-button type="danger" :icon="Delete" @click="doApartmentRemove(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-model:current-page="queryParam.current" v-model:page-size="queryParam.size" :page-sizes="[1, 2, 3, 4]"
        layout="jumper,prev, pager, next,->,sizes,total" :total="totals" 
        @current-change="doAparmentListQuery()"
        @size-change="doAparmentListQuery()" />
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: '', //组件名称
})
</script>
<script lang="ts" setup>
import { Plus, Edit, Delete } from "@element-plus/icons-vue"
import { ref,onMounted } from "vue"
import {aparmentListQuery,AptQuery,ApartmentData,aparmentRemove} from '@/api/apartmentManagement/index';
import { ElMessage, ElMessageBox } from 'element-plus'
import {  type Province,
          type City,
          type District,
          provinceList,
          cityList,
          districtList} from '@/api/region/index'
import {useRouter} from 'vue-router'


const page = ref(1)
const limit = ref(5)
const totals = ref(0)


//进入vue -> 声明接收records的响应式数据集合 | 声明一个传递参数 ->调用 api接口(onMounted) 
//-> 获取返回records -> table遍历
//请求的参数
let queryParam = ref<AptQuery>({
  current: 1,
  size:3,
  provinceId:"",
  cityId:"",
  districtId:""
})
//接收响应的数据
let apartmentList = ref<ApartmentData[]>([]);

let doAparmentListQuery = async()=>{
    let {data:{records,total}} = await aparmentListQuery(queryParam.value);
    totals.value = total as number;
    apartmentList.value = records.map(item=>{
      //处理一遍 1 = true
      item.isRelease = item.isRelease == 1;
      return item;
    });
}


//定义删除公寓的逻辑
let doApartmentRemove= (apartment)=>{
  //弹出一个框,确定删除,否则取消
  ElMessageBox.confirm(
    `您确定要删除:${apartment.name}的数据?`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      await aparmentRemove(apartment.id);
      doAparmentListQuery();
      //确定
      ElMessage({
        type: 'success',
        message: '数据删除成功!',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除!',
      })
    })
 
}

//获取省市区信息
//1.获取省份列表功能
let pList = ref<Province[]>([]);

let doProvinceList = async ()=>{
    let {data} = await provinceList();
    console.log(data);
    pList.value =data;
}

//2.查询城市列表
let cList = ref<City[]>([]);
let doCityList = async ()=>{
    let {data} = await cityList(queryParam.value.provinceId as number);
    queryParam.value.districtId = "";
    queryParam.value.cityId = "";
    console.log(data);
    cList.value =data;
}

//3.区列表查询
let dList = ref<District[]>([]);
let doDistrictList = async ()=>{
    let {data} = await districtList(queryParam.value.cityId as number);
    queryParam.value.districtId = "";
    console.log(data);
    dList.value =data;
}

//4.重置
let resetData =()=>{
    queryParam.value.provinceId = "";
    queryParam.value.districtId = "";
    queryParam.value.cityId = "";
    doAparmentListQuery()
}

onMounted(()=>{
  doAparmentListQuery();
  doProvinceList();
});



let router = useRouter();

//编写页面跳转的路由方法
let jumpAdd = ()=>{
    router.push("/apartmentManagement/apartmentManagement/addOrEditApartment");
}
let jumpEdit = (id:any)=>{
    router.push(`/apartmentManagement/apartmentManagement/addOrEditApartment?id=${id}`);
}


</script>
